<template>
  <view class="order-detail-container">
    <!-- 自定义导航栏 -->
    <navbar 
      title="订单信息" 
      right-text=""
      @goBack="goBack"
    />

    <!-- 订单信息卡片 -->
    <view class="order-summary-card">
      <view class="card-title">订单信息</view>
      <view class="order-info-row">
        <text class="label">订单编号:</text>
        <text class="value">{{ order.orderId || '202508161349081146' }}</text>
      </view>
      <view class="order-info-row">
        <text class="label">订单类型:</text>
        <text class="value">{{ order.orderType || '代取快递' }}</text>
      </view>
      <view class="order-info-row">
        <text class="label">下单时间:</text>
        <text class="value">{{ formatDate(order.orderTime) }}</text>
      </view>
      <view class="order-info-row">
        <text class="label">更新时间:</text>
        <text class="value">{{ formatDateTime(order.updateTime || order.orderTime) }}</text>
      </view>
    </view>

    <!-- 订单详情标题 -->
    <view class="section-header">订单详情</view>

    <!-- 物品信息详情卡片 -->
    <view class="item-details-card">
      <view class="card-title">物品信息详情</view>
      <view class="item-main-info">
        <view class="item-description">
          <text class="item-text">{{ order.orderTitle || '大(电脑桌/洗衣液)类(取件码:取件码' }}</text>
          <text class="pickup-code" v-if="order.pickupCode">{{ order.pickupCode }}</text>
          <text class="pickup-code" v-else-if="order.orderDescription">{{ order.orderDescription }}</text>
        </view>
        <view class="item-price">
          <text class="price-symbol">¥</text>
          <text class="price-value">{{ order.orderAmount || '4.50' }}</text>
        </view>
      </view>
      <view class="pickup-address-row">
        <text class="label">取货地址:</text>
        <text class="value">{{ order.orderAddress || '东院15号楼(二食堂)' }}</text>
      </view>
    </view>

    <!-- 收件人信息卡片 -->
    <view class="recipient-info-card">
      <view class="recipient-row">
        <text class="label">收件人:</text>
        <text class="value">{{ order.customerName || '毕凯策' }}</text>
      </view>
      <view class="recipient-row">
        <text class="label">收件电话:</text>
        <view class="phone-info">
          <text class="phone-icon">📞</text>
          <text class="phone-number">{{ order.orderPhone || '19374953642' }}</text>
        </view>
      </view>
      <view class="recipient-row">
        <text class="label">收件地址:</text>
        <text class="value address-value">{{ order.deliveryAddress || order.orderAddress || '科技(东院) - 皇悦3期图书馆8楼西---振涛/保理/科技-校园贴吧' }}</text>
      </view>
      <view class="recipient-row">
        <text class="label">性别限制:</text>
        <text class="value">{{ order.genderRestriction || '不限' }}</text>
      </view>
      <view class="recipient-row">
        <text class="label">送达时间:</text>
        <text class="value">{{ formatDeliveryTime(order.deliveryTime) }}</text>
      </view>
      <view class="recipient-row">
        <text class="label">加价金额:</text>
        <text class="value">{{ order.additionalPrice || '0' }}</text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <view class="customer-service-btn" @click="contactCustomerService">
        <text class="service-icon">📞</text>
        <text class="service-text">联系客服</text>
      </view>
      <view :class="['status-btn', getStatusClass(order.orderStatus)]">
        <text class="status-text">{{ order.orderStatus || '已取消' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import navbar from './navbar.vue'
import { ordersApi } from '@/api/orders'
import type { Order, ApiResponse } from '@/types/api/orders'

// 订单数据
const order = ref<Order>({})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 格式化日期 (MM-DD HH:mm)
const formatDate = (date: Date | string | null) => {
  if (!date) return '08-16 13:49'
  const d = new Date(date)
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hours = String(d.getHours()).padStart(2, '0')
  const minutes = String(d.getMinutes()).padStart(2, '0')
  return `${month}-${day} ${hours}:${minutes}`
}

// 格式化日期时间 (YYYY-MM-DD HH:mm:ss)
const formatDateTime = (date: Date | string | null) => {
  if (!date) return '2025-08-16 21:00:12'
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hours = String(d.getHours()).padStart(2, '0')
  const minutes = String(d.getMinutes()).padStart(2, '0')
  const seconds = String(d.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 格式化送达时间
const formatDeliveryTime = (date: Date | string | null) => {
  if (!date) return '08-16 14:19'
  return formatDate(date)
}

// 获取状态样式类
const getStatusClass = (status: string) => {
  const classMap: { [key: string]: string } = {
    '待付款': 'pending',
    '待接单': 'waiting',
    '待取货': 'pickup',
    '待送达': 'delivery',
    '已送达': 'delivered',
    '已完成': 'completed',
    '已取消': 'canceled',
    '已过期': 'expired'
  }
  return classMap[status] || 'canceled'
}

// 联系客服
const contactCustomerService = () => {
  uni.showModal({
    title: '联系客服',
    content: '客服电话：400-123-4567\n工作时间：9:00-18:00',
    confirmText: '拨打电话',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: '400-123-4567'
        })
      }
    }
  })
}

// 获取订单详情
const fetchOrderDetail = async (orderId: string) => {
  try {
    console.log('开始获取订单详情:', orderId)
    const response = await ordersApi.getOrderDetail(orderId) as ApiResponse<Order>
    
    if (response.success) {
      console.log('获取订单详情成功:', response.data)
      order.value = response.data
    } else {
      console.error('获取订单详情失败:', response.message)
      uni.showToast({
        title: response.message || '获取订单详情失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
    uni.showToast({
      title: '获取订单详情失败',
      icon: 'none'
    })
  }
}

// 页面加载时获取订单详情
onMounted(() => {
  // 从路由参数获取订单ID
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const orderId = currentPage.options?.orderId
  
  if (orderId) {
    fetchOrderDetail(orderId)
  } else {
    console.error('未获取到订单ID')
    uni.showToast({
      title: '订单ID无效',
      icon: 'none'
    })
  }
})
</script>

<style scoped>
.order-detail-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

/* 订单信息卡片 */
.order-summary-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
}

.order-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.label {
  font-size: 28rpx;
  color: #666666;
}

.value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

/* 订单详情标题 */
.section-header {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin: 30rpx 20rpx 20rpx;
}

/* 物品信息详情卡片 */
.item-details-card {
  background-color: #ffffff;
  margin: 0 20rpx 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.item-main-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.item-description {
  flex: 1;
  margin-right: 20rpx;
}

.item-text {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.4;
}

.pickup-code {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  margin-top: 8rpx;
  display: block;
}

.item-price {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
}

.price-symbol {
  font-size: 24rpx;
  color: #ff4757;
  margin-right: 4rpx;
}

.price-value {
  font-size: 32rpx;
  color: #ff4757;
  font-weight: bold;
}

.pickup-address-row {
  display: flex;
  align-items: flex-start;
  margin-top: 20rpx;
}

.pickup-address-row .label {
  flex-shrink: 0;
  margin-right: 20rpx;
  margin-top: 4rpx;
}

.pickup-address-row .value {
  flex: 1;
  line-height: 1.4;
}

/* 收件人信息卡片 */
.recipient-info-card {
  background-color: #ffffff;
  margin: 0 20rpx 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.recipient-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.recipient-row .label {
  flex-shrink: 0;
  margin-right: 20rpx;
  margin-top: 4rpx;
}

.recipient-row .value {
  flex: 1;
  line-height: 1.4;
}

.phone-info {
  display: flex;
  align-items: center;
}

.phone-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.phone-number {
  color: #007aff;
  font-weight: 500;
}

.address-value {
  word-break: break-all;
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #eeeeee;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.customer-service-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.service-icon {
  font-size: 40rpx;
  color: #ff4757;
  margin-bottom: 8rpx;
}

.service-text {
  font-size: 24rpx;
  color: #666666;
}

.status-btn {
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  min-width: 200rpx;
  text-align: center;
}

.status-btn.pending {
  background-color: #ffa502;
}

.status-btn.waiting {
  background-color: #2ed573;
}

.status-btn.pickup {
  background-color: #1e90ff;
}

.status-btn.delivery {
  background-color: #ff6348;
}

.status-btn.delivered {
  background-color: #2ed573;
}

.status-btn.completed {
  background-color: #2ed573;
}

.status-btn.canceled {
  background-color: #ff4757;
}

.status-btn.expired {
  background-color: #747d8c;
}

.status-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
}
</style>
